<!--
 * @Author: 熊志伟 xiongzhiwei
 * @Date: 2024-12-02 15:12:41
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2024-12-17 09:11:51
 * @FilePath: \sr_system_manager_ui\src\components\FileItem\index.vue
 * @Description: 文件快捷预览、下载
-->

<template>
  <div class="flex items-center">
    <el-image :src="thumbnail" lazy loading="lazy" fit="cover" class="w-[16px] h-[16px] mr-[6px] flex-none"></el-image>
    <div class="file-name" @click="handlePreview">{{ props.file.name }}</div>
    <el-image :src="icon_download" lazy loading="lazy" fit="cover" class="w-[16px] h-[16px] cursor-pointer flex-none text-[#57A9FB]" @click="handleDownload"></el-image>
  </div>
</template>

<script setup lang="ts">
import icon_doc from '@/assets/images/icon_doc.webp'
import icon_excel from '@/assets/images/icon_excel.webp'
import icon_pdf from '@/assets/images/icon_pdf.webp'
import icon_txt from '@/assets/images/icon_txt.webp'
import icon_img from '@/assets/images/icon_img.webp'
import icon_file from '@/assets/images/icon_file.webp'
import icon_download from '@/assets/images/icon_download.webp'

const props = defineProps<{
  file: any
}>()

const { proxy } = getCurrentInstance();

const thumbnail = computed(() => {
  const url = props.file?.url?.toLowerCase()
  if (url.includes('.doc') || url.includes('.docx')) return icon_doc
  if (url.includes('.xls') || url.includes('.xlsx')) return icon_excel
  if (url.includes('.jpg') || url.includes('.jpeg') || url.includes('.png')) return icon_img
  if (url.includes('.txt')) return icon_txt
  if (url.includes('.pdf')) return icon_pdf
  return icon_file
})

function handlePreview() {
  proxy.$preview.open({
    src: props.file?.url
  })
}

function handleDownload() {
  proxy.$download.downloadFileSync(props.file?.url, props.file?.name)
}
</script>


<style lang="scss" scoped>
.file-name {
  @apply mr-[12px] text-[#57A9FB] text-[14px] cursor-pointer;
}
</style>